<script lang="ts" setup>
import { BikePackageDetailOrderTableCol } from '@/api/user/types/user'

// import { computed } from 'vue'
import dayjs from 'dayjs'
import { BikeTermOrderStatusCodeType, RentEquityType } from '@/types/enum'
import { useRouter } from 'vue-router'
defineProps<{
  data: BikePackageDetailOrderTableCol[]
  page: 'operatorsinfo' | 'userinfo'
  loading: boolean
}>()
const emits = defineEmits(['open', 'show-info', 'open-deduction'])
const changeOrderStatusColor = (orderStatusCode: BikeTermOrderStatusCodeType) => {
  switch (orderStatusCode) {
    case '1':
      return 'var(--xy-success-color)'
    case '-1':
      return 'var(--xy-warning-color)'
    case '0':
      return 'var(--xy-warning-color)'
    case '2':
      return 'var(--xy-warning-color)'
    case '3':
      return 'var(--xy-warning-color)'
    case '6':
      return 'var(--xy-warning-color)'
    case '9':
      return 'var(--xy-warning-color)'
    case '4':
      return 'var(--xy-light-color)'
    case '5':
      return 'var(--xy-light-color)'
    case '7':
      return 'var(--xy-light-color)'
    case '12':
      return 'var(--xy-light-color)'
    case '98':
      return 'var(--xy-grey-text-color)'
    case '99':
      return 'var(--xy-grey-text-color)'
    case '8':
      return 'var(--xy-danger-color)'
    case '10':
      return 'var(--xy-danger-color)'
    default:
  }
}
const router = useRouter()
const showHdRecord = (row: BikePackageDetailOrderTableCol) => {
  router.push({
    name: 'UserHdRecord',
    query: {
      userId: row.userId,
      orderId: row.orderId
    }
  })
}
const showTermRecord = (row: BikePackageDetailOrderTableCol) => {
  router.push({
    name: 'AdjustTermRecord',
    query: {
      orderId: row.orderId
    }
  })
}
const showInfo = (row: BikePackageDetailOrderTableCol) => {
  emits('show-info', row)
}
const handleAdjustTerm = (row: BikePackageDetailOrderTableCol) => {
  emits('open', row)
}
const changeRentEqity = (rentEquity: RentEquityType) => {
  switch (rentEquity) {
    case 'allowChangeBattery':
      return '租期内免费换电'
    case 'canUseCoupon':
      return '支持优惠券'
    case 'payAfterUse':
      return '先用后付'
    case 'rentToOwn':
      return '以租代购'
    default:
      return ''
  }
}
const deduction = (row: BikePackageDetailOrderTableCol) => {
  emits('open-deduction', row)
}
const showDeductionRecord = (row: BikePackageDetailOrderTableCol) => {
  router.push({
    name: 'DepositDeductionRecord',
    query: {
      orderId: row.orderId
    }
  })
}
</script>

<template>
  <el-table :data="data" class="no-border" v-loading="loading">
    <el-table-column prop="mobilePhone" label="手机号" min-width="150" align="center" />
    <el-table-column prop="userName" label="姓名" align="center" />
    <el-table-column prop="orderId" label="充值订单" min-width="250" align="center" />
    <el-table-column prop="name" label="套餐名称" min-width="170" align="center" />
    <el-table-column prop="createdTime" label="购买时间" min-width="200" sortable align="center">
      <template #default="scope">
        <span>{{ dayjs(scope.row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="rentTime" label="租赁时长" align="center" />
    <el-table-column
      prop="orderStatusCode"
      label="订单状态"
      min-width="100"
      fixed="right"
      align="center"
    >
      <template #default="scope">
        <span :style="{ color: changeOrderStatusColor(scope.row.orderStatusCode) }">{{
          scope.row.orderDetailStatusDescription
        }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="rentEquity"
      label="租赁权益"
      min-width="150"
      align="center"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span v-for="(item, index) in scope.row.rentEquity" :key="index"
          >{{ changeRentEqity(item) }}&nbsp;&nbsp;&nbsp;</span
        >
      </template>
    </el-table-column>
    <el-table-column label="调整记录" fixed="right" v-if="page == 'userinfo'" align="center">
      <template #default="scope">
        <el-button
          type="primary"
          @click="showTermRecord(scope.row)"
          link
          class="is-show"
          v-if="scope.row.orderChanged == '1'"
          >查看</el-button
        >
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column label="换电记录" fixed="right" v-if="page == 'userinfo'" align="center">
      <template #default="scope">
        <el-button type="primary" link class="is-show" @click="showHdRecord(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="抵扣记录" fixed="right" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-show" link @click="showDeductionRecord(scope.row)"
          >查看</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="套餐调整">
      <template #default="scope">
        <el-button
          type="primary"
          link
          class="is-show"
          v-if="
            scope.row.orderStatusCode !== '4' &&
            scope.row.orderStatusCode !== '7' &&
            scope.row.orderStatusCode !== '2' &&
            scope.row.orderStatusCode != '0' &&
            scope.row.orderStatusCode != '12' &&
            scope.row.orderStatusCode != '6'
          "
          @click="handleAdjustTerm(scope.row)"
          >调整</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="押金抵扣" fixed="right" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-open" link @click="deduction(scope.row)"
          >发起</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="套餐详情" min-width="150" fixed="right" align="center">
      <template #default="scope">
        <el-button type="primary" class="is-open" link @click="showInfo(scope.row)">查看</el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="overdueAmount" label="逾期费配置" width="100" align="center">
      <template #default="scope">
        <span v-if="scope.row.bizType == 'BikeLongTerm' || scope.row.bizType == 'BatteryActivity'"
          >{{ scope.row.overdueAmount }}元/天</span
        >
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column prop="productModel" label="车辆型号" align="center" />
    <el-table-column prop="deposit" label="押金" align="center" />
    <el-table-column prop="orderAmount" label="租金(实际应付)" width="150" align="center">
      <template #default="scope">
        <span
          >{{ scope.row.orderAmount }}(<span
            :style="{
              color: scope.row.payStatus == '已支付' ? '#00A870' : '#F3860A'
            }"
            >{{ scope.row.payStatus }}</span
          >)</span
        >
      </template>
    </el-table-column>
    <el-table-column prop="remainingTime" label="剩余时长" width="120" align="center" />
    <el-table-column prop="startTime" label="开始时间" width="160" sortable align="center" /> -->
  </el-table>
</template>

<style scoped></style>
